<!doctype html><html lang="en"
  >
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Markdown - Categories - 忆尘博客</title><link rel="apple-touch-icon" href="/images/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/images/favicons/manifest.json">
<link rel="icon" href="/images/favicons/favicon.ico">
<meta name="keywords" content="Hugo, Bootstrap, Blog Theme" />
<meta name="description" content="An extreme fast, responsive and feature-rich blog theme for Hugo" /><meta itemprop="name" content="Markdown">
<meta itemprop="description" content="An extreme fast, responsive and feature-rich blog theme for Hugo"><meta property="og:title" content="Markdown" />
<meta property="og:description" content="An extreme fast, responsive and feature-rich blog theme for Hugo" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/en/categories/markdown/" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Markdown"/>
<meta name="twitter:description" content="An extreme fast, responsive and feature-rich blog theme for Hugo"/>
<meta name="twitter:site" content="@yourtwitterusername"/>
<link rel="alternate" type="application/rss+xml" href="/en/categories/markdown/index.xml" title="忆尘博客" /><link rel="preload" href="/css/bundle.min.fd4cecf242739163be984ae3de03d23c0bca36241435ac74374e102933e6797c.css" integrity="sha256-/Uzs8kJzkWO&#43;mErj3gPSPAvKNiQUNax0N04QKTPmeXw=" crossorigin="anonymous" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/bundle.min.fd4cecf242739163be984ae3de03d23c0bca36241435ac74374e102933e6797c.css" integrity="sha256-/Uzs8kJzkWO&#43;mErj3gPSPAvKNiQUNax0N04QKTPmeXw=" crossorigin="anonymous"></noscript><script src="/js/bundle.min.ba4b57bb653018b3da5a1e0ed23ac673e28c9f0624cc03f40d9c00568659899c.js" integrity="sha256-uktXu2UwGLPaWh4O0jrGc&#43;KMnwYkzAP0DZwAVoZZiZw=" crossorigin="anonymous"></script></head>
  <body><script src="/js/bootstrap.min.b5d86dd3a5f60c90be38a252bb65fc1a2732f32e71dc12c051720f0c7aef3cde.js" integrity="sha256-tdht06X2DJC&#43;OKJSu2X8Gicy8y5x3BLAUXIPDHrvPN4=" crossorigin="anonymous"></script><header><nav class="navbar top-app-bar top-app-bar-expand-lg fixed-top">
  <div class="container">
    <button class="navbar-settings me-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings"
  aria-controls="offcanvasSettings" aria-label="Toggle settings">
  <i class="fas fa-bars"></i>
</button>

<div class="offcanvas offcanvas-start surface" tabindex="-1" id="offcanvasSettings" aria-labelledby="offcanvasSettings">
  <div class="offcanvas-header">
    <h3 class="offcanvas-title">Settings</h3>
    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-dismiss="offcanvas" aria-label="Close">
      <i class="fas fa-times"></i>
    </button>
  </div>
  <div class="offcanvas-body"><section class="setting">
  <form class="row">
    <div class="col-auto">
      <label for="fontSize" class="form-label"><i class="fas fa-fw fa-language"></i> Language</label>
    </div>
    <div class="col-auto ms-auto">
      <div class="dropdown">
        <a class="btn btn-sm btn-outline-primary dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          English
        </a>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown"><li><a class="dropdown-item" href="/fr/">Français</a></li><li><a class="dropdown-item" href="/zh-tw/">繁體中文</a></li><li><a class="dropdown-item" href="/zh-cn/">简体中文</a></li></ul>
      </div>
    </div>
  </form>
</section>


<section class="setting">
  <form class="row">
    <div class="col-auto">
      <label><i class="fas fa-fw fa-adjust"></i> Mode</label>
    </div>
    <div class="col-auto ms-auto">
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="modeSwitcher">
      </div>
    </div>
  </form>
</section>

<section class="setting">
  <form class="font-size-switcher-form row">
    <div class="col-auto">
      <label for="fontSize" class="form-label"><i class="fas fa-fw fa-font"></i> Font Size</label>
    </div>
    <div class="col-auto ms-auto">
      <input type="range" class="form-range" min="-2" max="2" id="fontSize">
    </div>
  </form>
</section>


<section class="setting palettes">
  <form class="row">
    <div class="col-auto">
      <label><i class="fas fa-fw fa-palette"></i> Palette</label>
    </div>
    <div class="col-auto ms-auto">
      <a id="btnPalette" class="btn btn-sm btn-outline-primary" role="button" aria-label="palettePicker">
        <i class="fas fa-eye-dropper"></i>
      </a>
    </div>
  </form>
  <div class="mt-2 d-flex visually-hidden" id="palettePicker"><button type="button" id="palette-blue" aria-label="Blue"
        class="btn btn-sm palette" data-palette="blue">
      </button><button type="button" id="palette-blue-gray" aria-label="Blue Gray"
        class="btn btn-sm palette" data-palette="blue-gray">
      </button><button type="button" id="palette-brown" aria-label="Brown"
        class="btn btn-sm palette" data-palette="brown">
      </button><button type="button" id="palette-cyan" aria-label="Cyan"
        class="btn btn-sm palette" data-palette="cyan">
      </button><button type="button" id="palette-green" aria-label="Green"
        class="btn btn-sm palette" data-palette="green">
      </button><button type="button" id="palette-indigo" aria-label="Indigo"
        class="btn btn-sm palette" data-palette="indigo">
      </button><button type="button" id="palette-orange" aria-label="Orange"
        class="btn btn-sm palette" data-palette="orange">
      </button><button type="button" id="palette-pink" aria-label="Pink"
        class="btn btn-sm palette" data-palette="pink">
      </button><button type="button" id="palette-purple" aria-label="Purple"
        class="btn btn-sm palette" data-palette="purple">
      </button><button type="button" id="palette-red" aria-label="Red"
        class="btn btn-sm palette" data-palette="red">
      </button><button type="button" id="palette-teal" aria-label="Teal"
        class="btn btn-sm palette" data-palette="teal">
      </button><button type="button" id="palette-yellow" aria-label="Yellow"
        class="btn btn-sm palette" data-palette="yellow">
      </button></div>
</section>
<section class="setting social-share">
  <form class="row">
    <div class="col-auto">
      <label><i class="fas fa-fw fa-share-alt"></i> Share</label>
    </div>
    <div class="col-auto ms-auto">
      <a class="btn btn-sm btn-outline-primary btn-social-share"><i class="fas fa-share"></i></a>
    </div>
  </form>
  <div class="mt-2 social-share-buttons d-flex visually-hidden flex-nowrap">
    <a class="btn btn-sm btn-outline-primary social-share-button" rel="noopener noreferrer" aria-label="Twitter Share Button"
      target="_blank" href="https://twitter.com/intent/tweet?title=Markdown&url=%2fen%2fcategories%2fmarkdown%2f">
      <i class="fab fa-fw fa-twitter"></i> Twitter
    </a>
    <a class="btn btn-sm btn-outline-primary social-share-button" rel="noopener noreferrer" aria-label="Facebook Share Button"
      target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=%2fen%2fcategories%2fmarkdown%2f">
      <i class="fab fa-fw fa-facebook-f"></i> Facebook
    </a>
  </div>
</section>

</div>
</div>
<a class="navbar-brand me-3" href="/en/"><img class="logo" alt="Logo" src="/images/logo.webp" loading="lazy"
   width="136" height="69"
   />
忆尘
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <i class="fas fa-ellipsis-v"></i>
    </button>
    <div class="collapse navbar-collapse" tabindex="-1" id="navbarSupportedContent" aria-labelledby="navbarSupportedContent">
      <form class="search-bar my-1" action="/en/search">
  <div class="input-group input-group-sm">
    <span class="btn btn-search disabled position-absolute left-0"><i class="fas fa-fw fa-search"></i></span>
    <input class="form-control rounded-pill" name="q" type="search" aria-label="Search">
  </div>
</form>

      <ul class="navbar-nav ms-auto"><li class="nav-item">
          <a class="nav-link" href="/en/archives/">
            <i class="fas fa-fw fa-file-archive"></i>Archives
          </a>
        </li><li class="nav-item">
          <a class="nav-link" href="/en/categories/">
            <i class="fas fa-fw fa-folder"></i>Categories
          </a>
        </li><li class="nav-item">
          <a class="nav-link" href="/en/tags/">
            <i class="fas fa-fw fa-tags"></i>Tags
          </a>
        </li><li class="nav-item">
          <a class="nav-link" href="/en/series/">
            <i class="fas fa-fw fa-columns"></i>Series
          </a>
        </li><li class="nav-item dropdown">
          <a class="nav-link" id="navbarDropdown-dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-fw fa-chevron-circle-down"></i>Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown-dropdown"><li>
              <a class="dropdown-item"
                href="https://github.com/razonyang/hugo-theme-bootstrap" target="_blank" rel="noopener noreferrer">
                <i class="fab fa-fw fa-github"></i>Github
              </a>
            </li><li>
              <a class="dropdown-item"
                href="/en/series/manual">
                Manual
              </a>
            </li></ul>
        </li></ul>
    </div>
  </div>
</nav>
</header>
<main role="main" class="container">
      <div class="row content">
<div class="col-lg-8">
  <div class="container"><nav class="row card component" aria-label="breadcrumb">
  <div class="card-body">
    <ol class="breadcrumb "><li class="breadcrumb-item"><a href="/en/">Home</a></li><li class="breadcrumb-item"><a href="/en/categories/">Categories</a></li><li class="breadcrumb-item active">Markdown</li></ol>
  </div>
</nav><div class="posts mb-4"><article class="row card post component">
      <div class="card-body">
        <h2 class="card-title post-title"><a href="/en/posts/diagram/">Diagram Guide
</a></h2><div class="post-meta"><span class="post-date" title="created on">
    <i class="fas fa-fw fa-calendar-alt"></i>Sep 1, 2021
  </span><span class="post-reading-time" title="reading time">
    <i class="fas fa-fw fa-coffee"></i>1 min read
  </span><a href="/en/categories/markdown/" class="post-taxonomy">Markdown</a><a href="/en/series/manual/" class="post-taxonomy">Manual</a><a href="/en/tags/diagram/" class="post-taxonomy">Diagram</a></div>
<div class="post-summary">
          
          <p>This article offers a sample of basic diagram usage that can be used in Hugo content files.</p>
<p>Please see also <a href="https://mermaid-js.github.io" target="_blank" rel="noopener noreferrer">Mermaid</a>
.</p>
        </div>
      </div>
    </article><article class="row card post component">
      <div class="card-body">
        <h2 class="card-title post-title"><a href="/en/posts/image-processing/">Image Processing
</a></h2><div class="post-meta"><span class="post-date" title="created on">
    <i class="fas fa-fw fa-calendar-alt"></i>Aug 15, 2021
  </span><span class="post-reading-time" title="reading time">
    <i class="fas fa-fw fa-coffee"></i>1 min read
  </span><a href="/en/categories/markdown/" class="post-taxonomy">Markdown</a><a href="/en/series/manual/" class="post-taxonomy">Manual</a><a href="/en/tags/image/" class="post-taxonomy">Image</a></div>
<div class="post-summary">
          
          <img class="img-fluid" alt="Image Processing" src="/en/posts/image-processing/images/center.png" loading="lazy"
   width="120" height="69"
   />

          
          <p>This article offers some use cases for showing how to resize and align images.</p>
        </div>
      </div>
    </article></div><div class="row table-responsive mb-3"></div>
</div>

</div><aside class="col-lg-4 sidebar d-flex">
  <div class="container">
    
    <section class="card row text-center profile component">
  <div class="card-body">
    <div class="col-12 d-flex align-items-center justify-content-center"><img class="profile-avatar rounded-circle" alt="Yi Chen" src="/images/profile.webp" loading="lazy"
   width="400" height="400"
   />
</div>
    <div class="col-12 profile-meta"><div class="profile-name">Yi Chen</div><div class="profile-bio">好记性不如烂笔头.</div><div class="profile-company"><i class="fas fa-fw fa-building"></i>无</div><div class="profile-location"><i class="fas fa-fw fa-map-marker-alt"></i>福州</div><div class="profile-about"><i class="fas fa-fw fa-user"></i><a href="/en/about/">About</a></div></div>
  </div>
</section>
  <section class="featured-posts row card component">
    <div class="card-body">
      <h2 class="card-title">Featured Posts</h2>
      <ul><li><a href="/en/posts/markdown-syntax/">Markdown Syntax Guide
</a></li><li><a href="/en/posts/shortcodes/media/">Media Shortcodes
</a></li><li><a href="/en/posts/shortcodes/online-ide/">Online IDE Shortcodes
</a></li><li><a href="/en/posts/rich-content/">Rich Content
</a></li></ul>
    </div>
  </section><section class="recent-posts row card component">
  <div class="card-body">
    <h2 class="card-title">Recent Posts</h2>
    <ul><li><a href="/en/posts/diagram/">Diagram Guide
</a></li><li><a href="/en/posts/image-processing/">Image Processing
</a></li><li><a href="/en/posts/markdown-syntax/">Markdown Syntax Guide
</a></li><li><a href="/en/posts/shortcodes/alert/">Alert Shortcode
</a></li><li><a href="/en/posts/shortcodes/media/">Media Shortcodes
</a></li></ul>
  </div>
</section><section class="taxonomies row card component">
      <div class="card-body">
        <h2 class="card-title">
          <a href="/en/categories">Categories</a>
        </h2>
        <div><a href="/en/categories/shortcode/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Shortcode">
            Shortcode
          </a><a href="/en/categories/markdown/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Markdown">
            Markdown
          </a></div>
      </div>
    </section><section class="taxonomies row card component">
      <div class="card-body">
        <h2 class="card-title">
          <a href="/en/series">Series</a>
        </h2>
        <div><a href="/en/series/manual/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Manual">
            Manual
          </a></div>
      </div>
    </section><section class="taxonomies row card component">
      <div class="card-body">
        <h2 class="card-title">
          <a href="/en/tags">Tags</a>
        </h2>
        <div><a href="/en/tags/markdown/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Markdown">
            Markdown
          </a><a href="/en/tags/alert/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Alert">
            Alert
          </a><a href="/en/tags/bilibili/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Bilibili">
            Bilibili
          </a><a href="/en/tags/codepen/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="CodePen">
            CodePen
          </a><a href="/en/tags/css/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="CSS">
            CSS
          </a><a href="/en/tags/diagram/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Diagram">
            Diagram
          </a><a href="/en/tags/emoji/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Emoji">
            Emoji
          </a><a href="/en/tags/html/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="HTML">
            HTML
          </a><a href="/en/tags/image/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Image">
            Image
          </a><a href="/en/tags/instagram/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Instagram">
            Instagram
          </a></div>
      </div>
    </section>
    
  </div>
</aside>
</div>
    </main><footer class="footer mt-auto py-3 text-center container"><nav class="social-links nav my-2 justify-content-center"><a class="nav-link social-link" target="_blank" href="https://space.bilibili.com/yourbilibiliuserid" title="bilibili" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fas fa-tv"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://bitbucket.org/yourbitbucketworkspaceid" title="Bitbucket" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-bitbucket"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://discord.com/invite/yourdiscordinvitecode" title="Discord" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-discord"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://yourforum.tld" title="Discourse" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-discourse"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://hub.docker.com/u/yourdockerhubusername" title="Docker Hub" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-docker"></i>
      </a><a class="nav-link social-link" href="mailto:user@domain.tld" title="Email">
      <i class="fas fa-fw fa-2x fa-envelope"></i>
    </a><a class="nav-link social-link" target="_blank" href="https://facebook.com/yourfacebookusername" title="Facebook" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-facebook-f"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://facebook.com/groups/yourfacebookgroupname" title="Facebook Group" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-facebook-square"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://github.com/yourgithubusername" title="GitHub" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-github"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://gitlab.com/yourgitlabusername" title="GitLab" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-gitlab"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.instagram.com/yourinstagramusername" title="Instagram" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-instagram"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://kaggle.com/yourkaggleusername" title="Kaggle" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-kaggle"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.last.fm/user/yourlastfmusername" title="Last.fm" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-lastfm"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://linkedin.com/yourlinkedinusername" title="LinkedIn" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-linkedin-in"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://medium.com/@yourmediumusername" title="Medium" rel="noopener noreferrer">
        <i class="fab fa-fw fa-2x fa-medium-m"></i>
      </a><a class="nav-link social-link" target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=yourqqnumber&amp;site=qq&amp;menu=yes" title="QQ" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-qq"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.quora.com/profile/yourquorausername" title="Quora" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-quora"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.reddit.com/user/yourredditusername" title="Reddit" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-reddit"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://stackoverflow.com/users/yourstackoverflowuserid" title="Stack Overflow" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-stack-overflow"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://t.me/yourtelegramusername" title="Telegram" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-telegram-plane"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.tiktok.com/@yourtiktokusername" title="TikTok" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-tiktok"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://yourtumblrusername.tumblr.com" title="Tumblr" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-tumblr"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://twitter.com/yourtwitterusername" title="Twitter" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-twitter"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://weibo.com/yourweibousername" title="Weibo" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-weibo"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.youtube.com/channel/youryoutubechannelid" title="Youtube" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-youtube"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.zhihu.com/people/yourzhihuusername" title="Zhihu" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-zhihu"></i>
      </a><a class="nav-link social-link" target="_blank" href="/en/categories/markdown/index.xml" title="RSS" rel="noopener noreferrer">
      <i class="fas fa-fw fa-2x fa-rss"></i>
    </a></nav>
<div class="copyright mb-2">
  忆尘博客 © 2021-2021 Yi Chen. 版权所有.
</div>
</footer>

</body>
</html>
